<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区 -->
    <el-card class="box-card">
      <!-- 按条件搜索 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入用户名" class="input-with-select">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <!-- 表格数据展示区 : data 得到数据 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="username" label="用户名" width="180"></el-table-column>
        <el-table-column prop="nickname" label="用户昵称" width="180"></el-table-column>
        <el-table-column prop="dept_id" label="所在部门"></el-table-column>
        <el-table-column prop="sex" label="性别">
        </el-table-column>
        <el-table-column prop="phone" label="电话"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="create_date" label="创建时间"> </el-table-column>
        <el-table-column prop="status" label="状态">
        </el-table-column>
        <el-table-column prop="op" label="操作">
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
    data(){
        return {
           querParams:{
               queryCondition:"",
               currentPage:1,
               pageSize: 5
           },
           //表格数据
           tableData:[],
        }
    },
    created(){
        this.getSysUserData();
    },
    methods:{
        async getSysUserData(){
            const {data:res} = await this.$http.get("system/sys_user/list",{params:this.querParams})
            if(res.code == 0){
               this.tableData = res.data;
            }
        }
    }
};
</script>

<style>
.box-card {
  margin-top: 15px;
}
.el-table{
    margin-top: 10px;
}
</style>